{% extends 'rbac/layout.html' %}
{% block css %}
    <style>
        .root {
            background-color: #9acfea;
        }
    </style>
{% endblock %}
{% block content %}

    <div class="show-grid">
        <!--菜单面板start-->
        <div class="col-xs-6 col-md-4">
            <div class="panel panel-info">
                <div class="panel-heading">
                    菜单管理
                    <a href="{% url 'menu_add' %}" class="btn btn-success btn-sm pull-right">新建</a>
                </div>
                <div class="panel-body">

                    <!--菜单展示start-->
                    <div class="bs-example" data-example-id="hoverable-table">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>一级菜单名称</th>
                                <th>图标</th>
                                <th>选项</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for field in menu_queryset %}
                                <tr>
                                    <th scope="row"><a href="?mid={{ field.id }}">{{ field.title }}</a></th>
                                    <td><i class="fa {{ field.icon }}"></i></td>
                                    <td><a href="{% url 'menu_edit' menu_id=field.id %}"><i
                                            class="fa fa-pencil-square-o"
                                            aria-hidden="true"></i>编辑</a>
                                        <a href="{% url 'menu_del' menu_id=field.id %}"><i class="fa fa-trash-o"
                                                                                           aria-hidden="true"></i>删除</a>
                                    </td>
                                </tr>
                            {% endfor %}


                            </tbody>
                        </table>
                    </div>
                    <!--菜单展示end-->

                </div>
            </div>
        </div>
        <!--菜单面板end-->

        <div class="col-xs-12 col-md-8">
            <!--菜单二级三级展示start-->
            <div class="panel panel-info">
                <div class="panel-heading">
                    权限管理
                    <a href="{% url 'tmenu_func_add' %}" class="btn btn-success btn-sm pull-right">二级及功能模块新建</a>
                </div>
                <div class="panel-body">

                    <!--菜单展示start-->
                    <div class="bs-example" data-example-id="hoverable-table">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>二级菜单名称</th>
                                <th>URL</th>
                                <th>CODE</th>
                                <th>二级菜单</th>
                                <th>所属菜单</th>
                                <th>选项</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!--二级菜单start-->
                            {% for item in menu_tow_dict.values %}
                                <tr {% if item.menu_id %}
                                    class="root"
                                    {% else %}
                                {% endif %} >
                                    <th>{{ item.title }}</th>
                                    <td>{{ item.url }}</td>
                                    <td>{{ item.name }}</td>
                                    <td>
                                        {% if item.menu_id %}
                                            是
                                        {% else %}
                                            否
                                        {% endif %}
                                    </td>
                                    <td>{{ item.menu.title }}</td>
                                    <td><a href="{% url 'tmenu_func_edit' pk=item.id %}"><i
                                            class="fa fa-pencil-square-o"
                                            aria-hidden="true"></i>编辑</a>
                                        <a href="{% url 'tmenu_func_del' pk=item.id %}"><i class="fa fa-trash-o"
                                                                                           aria-hidden="true"></i>删除</a>
                                    </td>
                                </tr>
                                {% for child in item.children %}
                                    <tr>
                                        <th>{{ child.title }}</th>
                                        <td>{{ child.url }}</td>
                                        <td>{{ child.name }}</td>
                                        <td>
                                            {% if child.menu %}
                                                是
                                            {% else %}
                                                否
                                            {% endif %}
                                        </td>
                                        <td>{{ child.menu.title }}</td>
                                        <td><a href="{% url 'tmenu_func_edit' pk=child.id %}"><i
                                                class="fa fa-pencil-square-o"
                                                aria-hidden="true"></i>编辑</a>
                                            <a href="{% url 'tmenu_func_del' pk=child.id %}"><i class="fa fa-trash-o"
                                                                                               aria-hidden="true"></i>删除</a>
                                        </td>
                                    </tr>

                                {% endfor %}

                            {% endfor %}
                            <!--二级菜单end-->

                            </tbody>
                        </table>
                    </div>
                    <!--菜单展示end-->

                </div>
            </div>
            <!--菜单二级三级展示end-->
        </div>
    </div>

{% endblock %}